<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>小米商城登录</title>

        <style type="text/css">
            body { margin : 0 ; padding : 0 ; }
            .header { border: 1px solid blue ;  }
            /* 后代选择器 */
            .header .logo { width: 1130px ; height: 98px ; margin: auto ; background-color: #FFFF00 ;  }

            .wrapper { border: 2px solid red ; height: 500px ; }
            /* 后代选择器 */
            .wrapper .link {
                display: block ; /* 让 a 元素变成 块元素 */
                width: 100% ;
                height: 500px ;
                background-image: url("redmi.jpg");
                background-repeat: no-repeat;
                background-position: center ;
            }

            /* 后代选择器 */
            .wrapper .sign-in-form {
                width: 25% ;
                height: 400px ;
                background-color: #ffffff;
                margin-left: 62.5%;
                margin-top: -400px ;
            }

            /* 后代选择器 */
            .wrapper .sign-in-form fieldset {
                border: none ; /* 取消四周边框 */
                border-top : 1px solid #a9a9a9; /*单独设置顶边边框*/
                text-align: center ; /* 让 legend 中的内容水平居中对齐 */
            }

            /* 后代选择器 */
            .wrapper .sign-in-form fieldset .login-links {
                display: inline-block ;
                width: 18px ;/*width: 30px ;*/
                height: 18px ; /*height: 30px ;*/
                background-color: #1e9fff;
                margin: 0 12px ;
                border-radius: 50% ;
                background-image: url("icons_type.png");
                background-repeat: no-repeat ;
                border : 6px solid transparent ;
            }

            .wrapper .sign-in-form fieldset .qq { background-color: #0288d1 ; }
            .wrapper .sign-in-form fieldset .weibo {
                border-color: #d32f2f ;
                background-color: #d32f2f ;
                background-position: -38px 0 ;
            }
            .wrapper .sign-in-form fieldset .alipay {
                width: 26px ;
                border-left-width: 2px ;
                border-right-width: 2px ;
                border-color: #0AE ;
                background-color: #00AAEE ;
                background-position: -57px 0 ;
            }
            .wrapper .sign-in-form fieldset .wechat { background-color: #00d20d ; }
        </style>

    </head>
    <body>

        <div class="header">
            <div class="logo"></div>
        </div>

        <div class="wrapper">
            <a href="http://www.mi.com" class="link"></a>
            <div class="sign-in-form">
                <div style="height: 250px"></div>
                <fieldset>
                    <legend>其他方式登录</legend>
                    <a class="login-links qq"></a>
                    <a class="login-links weibo" title="用微博账号登录"></a>
                    <a class="login-links alipay"></a>
                    <a class="login-links wechat"></a>
                </fieldset>
            </div>
        </div>


    </body>
</html>